<template>
	<view>
		<view style="position: sticky;top: 0;">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<view class="bg-FF" style="margin: 30rpx;" v-for="(item,index) in showOrderList" :key="index" @click="detail(item)">
			<view class="pd-30 flex flex-ac flex-bt" style="padding-bottom: 30rpx; ">
				<view>{{item.BookTime.replace("T"," ").substring(0,16)}}</view>
				<view style="font-size:32rpx;color:#2979ff;font-weight:700">{{item.State==1?"待受理":(item.State==2?'已受理':(item.State==3?'已取消':""))}}</view>
			</view>
			<view><u-line color="#eee"></u-line></view>
			<view style="padding: 30rpx;">
				<view class="flex flex-ac">
					<view class="dot-blue"></view>
					<view class="ellipsis"
						style="padding-left: 20rpx;font-size: 30rpx;letter-spacing: 4rpx;font-weight: 700;width: 500rpx">
						{{item.StartSiteName}}
					</view>
				</view>
				<view class="flex flex-ac" style="padding-top: 20rpx;">
					<view class="dot-red"></view>
					<view class="ellipsis"
						style="padding-left: 20rpx;font-size: 30rpx;letter-spacing: 4rpx;font-weight: 700;width: 500rpx">
						{{item.EndSiteName}}
					</view>
				</view>
			</view>
			<view class="flex flex-ac" style="padding: 0 30rpx;font-size: 30rpx;color: #888;">
				<view>{{item.StartTime.replace("T"," ").substring(0,16)}} </view>
				<view> 至 </view>
				<view> {{item.EndTime.replace("T"," ").substring(0,16)}}</view>
			</view>
			<view class="pd-30 flex" style="justify-content: flex-end;">
				<u-button type="warning" size="mini" v-if="item.State!=3" @click="cancelBook(item.AID)">取消</u-button>
			</view>
		</view>
		<view style="height: 30rpx;"></view>
		<view style="padding-top: 100rpx;" v-if="showOrderList.length==0">
			<u-empty text="查无数据" mode="list"></u-empty>
		</view>
	</view>
</template>
<script>
	var that;
	export default {
		data() {
			return {
				current: 0,
				list: [{
					name: '全部'
				}, {
					name: "待受理"
				}, {
					name: "已受理"
				}, {
					name: "已取消"
				}],
				orderList: [],
				userInfo: "",
				showOrderList: [],
			}
		},
		onLoad() {
			that = this;
			that.userInfo = uni.getStorageSync("userInfo") || "";
			if (that.userInfo == "") {
				return;
			}
			this.getBookList();
		},
		methods: {
			change: function(index) {
				this.current = index;
				this.listChange();
			},
			getBookList: function() {
				this.orderList = [];
				uni.showLoading({
					title: `正在查询···`,
					mask: true
				})
				uni.request({
					url: 'https://chuxing.mbxing.com/api/CharteredBus/GetBookList',
					method: "POST",
					data: {
						ClientID: that.userInfo.Id
					},
					success(res) {
						console.log(res)
						if (res.data.IsSuccess) {
							that.orderList = res.data.Data;
							that.listChange();
						}
					},
					complete() {
						uni.hideLoading();
					}
				})
			},
			cancelBook: function(id) {
				uni.showLoading({
					title: `正在操作···`,
					mask: true
				})
				uni.request({
					url: 'https://chuxing.mbxing.com/api/CharteredBus/CancelBook',
					method: "POST",
					data: {
						AID: id
					},
					success(res) {
						if (res.data.IsSuccess) {
							uni.showToast({
								title: `取消成功`,
								mask: true,
								icon: 'none'
							})
							setTimeout(function() {
								that.getBookList();
							}, 1500)
						} else {
							uni.showToast({
								title: `取消失败,${res.data.Message}`,
								mask: true,
								icon: 'none'
							})
						}
					},
					fail(err) {
						uni.showToast({
							title: `取消失败,${err.data.Message}`,
							mask: true,
							icon: 'none'
						})
					},
					complete() {
						uni.hideLoading();
					}
				})
			},
			listChange: function() {
				this.showOrderList = [];
				if (this.current == 0) { //全部
					this.showOrderList = this.orderList;
				} else if (this.current == 1) { //待受理
					for (var i = 0; i < this.orderList.length; i++) {
						if (this.orderList[i].State == 1) {
							this.showOrderList.push(this.orderList[i]);
						}
					}
				} else if (this.current == 2) { //已受理
					for (var i = 0; i < this.orderList.length; i++) {
						if (this.orderList[i].State == 2) {
							this.showOrderList.push(this.orderList[i]);
						}
					}
				} else if (this.current == 3) { //已取消
					for (var i = 0; i < this.orderList.length; i++) {
						if (this.orderList[i].State == 3) {
							this.showOrderList.push(this.orderList[i]);
						}
					}
				}
			},
			detail:function(e){
				uni.navigateTo({
					url:'OrderDetail?param='+JSON.stringify(e)
				})
			}
		}
	}
</script>

<style>
	.dot-red {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #F35A46;
	}

	.dot-blue {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #2979ff;
	}
</style>